<template>
    <div id="InfoBorad">
        <el-dialog v-model="$store.InfoboradDlg" title="信息发布管理" width="760" :before-close="$store.InfoboradID = ''"
            align-center>
            <div class="InfoBoardDetail">
                <div style="padding-left: 10px;font-size: 18px;color: gray;">设备信息:</div>
                <div class="DevicInfo">
                    <div class="InfoItem">
                        <div>设备名称:</div>
                        <div class="InfoContent">{{ DeviceInfo.name ? DeviceInfo.name : '' }}</div>
                    </div>
                    <div class="InfoItem">
                        <div>设备厂家:</div>
                        <div class="InfoContent">{{ DeviceInfo.factory ? DeviceInfo.factory.label : '' }}</div>
                    </div>

                    <div class="InfoItem">
                        <div>设备型号:</div>
                        <div class="InfoContent">{{ DeviceInfo.model ? DeviceInfo.model.label : '' }}</div>
                    </div>
                    <div class="InfoItem">
                        <div>设备IP:</div>
                        <div class="InfoContent">{{ DeviceInfo.ip ? DeviceInfo.ip : '' }}</div>
                    </div>
                    <div class="InfoItem">
                        <div>所在方向:</div>
                        <div class="InfoContent">{{ DeviceInfo.direction ? DeviceInfo.direction.label : '' }}</div>
                    </div>
                    <div class="InfoItem">
                        <div>设备尺寸:</div>
                        <div class="InfoContent">{{ DeviceInfo.width + "×" + DeviceInfo.height }}</div>
                    </div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                    <div style="padding-left: 14px;font-size: 18px;margin-bottom: 10px;color: gray;">播放列表:</div>
                    <div style="padding-right: 20px;">
                    </div>
                </div>
                <div class="playlist">
                    <div v-for="(item, index) in PlayList" :class="index % 2 == 0 ? 'playitems' : 'playitemq'"
                        :key="item.id" :style="{ color: formatColor(item.font_color.value) }">
                        <div>
                            {{ item.content }}
                        </div>
                        <div>
                            <el-icon style="cursor: pointer;margin-right: 10px;" @click="updMsg(item.id)" :size="20"
                                color="#fff">
                                <Setting />
                            </el-icon>
                            <el-icon style="cursor: pointer;" @click="DelMsg(item.id)" :size="20" color="#fff">
                                <Delete />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer" v-show="IsApply == '0'" style="margin-right: 95px;">
                    <el-button size="default" type="primary" icon="Plus" @click="openaddmsg()">添加</el-button>
                    <!-- <el-button size="default" @click="cancelDlg()" icon="Close" type="info">关闭</el-button> -->
                    <el-button size="default" type="info" icon="StarFilled" @click="getplayinglist()">收藏</el-button>
                    <!-- <el-button size="small" type="success" @click="getplayinglist()">获取前端</el-button> -->

                    <el-button size="default" type="info" icon="Right" @click="moudlemsg()">导入</el-button>
                    <el-button size="default" type="info" icon="DeleteFilled" @click="clearmsg()">清空</el-button>
                    <el-button size="default" icon="Expand" type="success" @click="batchsend()">
                        群发
                    </el-button>
                    <el-button size="default" type="primary" icon="Promotion" :loading="loading" @click="ApplyMsg()">
                        发布
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 发布信息 -->
        <el-dialog v-model="msgshow" :title="msgtitle" width="900" :before-close="$store.InfoboradID = ''" align-center>
            <div class="msgcontent">

                <el-form :inline="true" :model="msgform" label-width="160" class="demo-form-inline">
                    <div class="">
                        <el-form-item label="消息内容">
                            <el-input v-model="msgform.content" type="textarea" placeholder="请输入消息内容"
                                @input="f_ResetXY" />
                        </el-form-item>
                    </div>
                    <el-form-item label="对齐方式">
                        <el-select v-model="msgform.align" placeholder="请选择对齐方式" @change="ckalign">
                            <el-option v-for="item in alignList" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="播放方式">
                        <el-select v-model="msgform.transition" placeholder="请选择播放方式">
                            <el-option v-for="item in TransitionList" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字体">
                        <el-select v-model="msgform.font" placeholder="请选择字体">
                            <el-option v-for="item in FontList" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字体大小">
                        <el-select v-model="msgform.font_size" placeholder="请选择字体大小" @change="f_ResetXY">
                            <el-option v-for="item in FontSizeList" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字体颜色">
                        <el-select v-model="msgform.font_color" placeholder="请选择字体颜色">
                            <el-option v-for="item in FontColorList" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="停留时长(秒)">
                        <el-input v-model="msgform.delay_time" placeholder="请输入停留时长" />
                    </el-form-item>
                    <el-form-item label="出字速度">
                        <el-select v-model="msgform.speed" placeholder="请选择出字速度">
                            <el-option v-for="item in speedList" :label="item.label" :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="msgform.sort" placeholder="请输入当前信息排序" />
                    </el-form-item>
                    <el-form-item label="左边偏移">
                        <el-input v-model="msgform.leftx" style="width: 70px !important;margin-right: 10px;" />
                        <el-input v-model="msgform.lefty" style="width: 70px !important" />
                    </el-form-item>
                    <el-form-item label="发布类型">
                        <el-select v-model="msgform.type" placeholder="请选择发布类型">
                            <el-option v-for="item in TypeList" :label="item.name" :value="item.value" />
                        </el-select>
                    </el-form-item>

                </el-form>

                <div style="padding-left: 10px;font-size: 20px;margin-bottom: 10px;">
                    预览：{{ DeviceInfo.width + "×" + DeviceInfo.height }}
                </div>
                <div class="preview-f"
                    :style="{ width: DeviceWidth * 2 + 'px', height: DeviceHeight * 2 + 'px', justifyContent: formatAlign(msgform.align) }">
                    <div class="preview" :style="{
                        color: formatColor(msgform.font_color),
                        fontSize: formatSize(msgform.font_size),
                        lineHeight: formatSize(msgform.font_size),
                    }" v-html="f_GetHTML(msgform.content)">
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer" v-show="IsApply == '0'">
                    <el-button type="primary" icon="Check" @click="includeStr()">确定</el-button>
                    <el-button type="info" icon="Close" @click="cancleMsg()">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="moudledlg" title="模板列表" width="500" :before-close="backTemp()" align-center>
            <div class="templist">
                <el-table v-show="father" border :data="TempList" stripe style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="60" />
                    <el-table-column label="模板名称">
                        <template #default="scope">
                            <div style="cursor: pointer;" @click="ChildNode(scope.row)">{{ scope.row.name }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button v-show="!father && showTempFather" @click="f_back()" type="primary"
                    style="margin-bottom: 10px;">返回上级</el-button>
                <el-table v-show="showTempFather && !father" border :data="TempList" stripe style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="60" />
                    <el-table-column label="模板名称">
                        <template #default="scope">
                            <div style="cursor: pointer;" @click="getChild(scope.row)">{{ scope.row.name }}</div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button v-show="!showTempFather" @click="showTempFather = true" type="primary"
                    style="margin-bottom: 10px;">返回上级</el-button>
                <el-button v-show="!showTempFather" @click="moudlepublish()" type="success"
                    style="margin-bottom: 10px;">模版添加</el-button>
                <el-table v-show="!showTempFather" border :data="ChildTempList" stripe style="width: 100%"
                    @selection-change="setSelectmoudle">
                    <el-table-column align="center" type="index" label="序号" width="60" />
                    <el-table-column align="center" label="发布内容">
                        <template #default="scope">
                            <div style="cursor: pointer;">{{ scope.row.content }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column type="selection" label="选择" />
                    <!-- <el-table-column></el-table-column> -->
                </el-table>
            </div>
        </el-dialog>
        <el-dialog v-model="PlayingShow" title="前端播放" width="500" align-center>
            <div class="playlist">
                <div v-for="(item, index) in PlayList" :class="index % 2 == 0 ? 'playitems' : 'playitemq'"
                    :key="item.id" :style="{ color: formatColor(item.font_color.value) }">
                    <div>
                        {{ item.content }}
                    </div>
                </div>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="PlayingShow = false" type="info">
                        取消
                    </el-button>
                    <el-button type="primary" @click="publishFromfront()">从前端发布</el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="batchShow" title="群发" width="1020" align-center :before-close="closeQunFA">
            <el-checkbox-group v-model="checkedClass" @change="handleCheckedClassChange">
                <el-button type="primary" :loading="loadings" style="margin-bottom: 10px;margin-right: 20px;"
                    @click="republis()">确定</el-button>
                <el-checkbox v-for="item in ModelList" :key="item.id" :label="item.label" :value="item.value"
                :class="item.value=='offline'?'redlabel':''"
                    size="large">
                    <span style="font-size: 14px;" :class="item.value=='offline'?'redlabel':''">{{ item.label }}</span>
                </el-checkbox>
            </el-checkbox-group>
            <el-table :data="ApplyList" border style="width: 99%" height="500" @selection-change="setSelectRows">
                <el-table-column type="index" label="序号" width="70" align="center" />
                <el-table-column align="center" label="是否在线" width="90">
                    <template #default="scope">
                        <img :src="scope.row.online ? './img/zx_ico.png' : './img/zx_icol.png'" alt="">
                    </template>
                </el-table-column>
                <el-table-column label="位置" width="120">
                    <template #default="scope">
                        <div>
                            <div v-if="!scope.row.stake"></div>
                            <div v-else>
                                {{ f_GetZH(scope.row.stake) }} {{ scope.row.direction ? scope.row.direction.value == '1'
                                    ?
                                    '↓' : '↑' : '' }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="名称" width="200">
                    <template #default="scope">
                        <div>{{ scope.row.name }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="IP" width="140">
                    <template #default="scope">
                        <div>{{ scope.row.ip }} </div>
                    </template>
                </el-table-column>

                <el-table-column label="类型" width="90" align="left">
                    <template #default="scope">
                        <div>{{ scope.row.model ? scope.row.model.label : '' }} </div>
                    </template>
                </el-table-column>
                <el-table-column label="尺寸" width="90">
                    <template #default="scope">
                        <div>{{ scope.row.width + "*" + scope.row.height }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="厂家" width="120">
                    <template #default="scope">
                        <div>{{ scope.row.factory.label }}</div>
                    </template>
                </el-table-column>
                <el-table-column type="selection" label="选择" />
                <el-table-column label="" />
            </el-table>
        </el-dialog>
        <el-dialog v-model="moudleNodeDlg" title="模板节点" width="500" :before-close="backTemp()" align-center>
            <div class="templist">
                <el-table v-show="nodeFather" border :data="TempList" stripe style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="60" />
                    <el-table-column label="模板名称">
                        <template #default="scope">
                            <div style="cursor: pointer;" @click="NodeChildNode(scope.row)">{{ scope.row.name }}</div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column></el-table-column> -->
                </el-table>
                <el-button v-show="!nodeFather && showTempFather" @click="n_back()" type="primary"
                    style="margin-bottom: 10px;" icon="Back">返回</el-button>
                <el-table v-show="showTempFather && !nodeFather" border :data="TempList" stripe style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="60" />
                    <el-table-column label="模板名称">
                        <template #default="scope">
                            <div style="cursor: pointer;">{{ scope.row.name }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button @click="checkNode(scope.row)" type="success" icon="Check">选择</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column></el--column> -->
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, onMounted, watch, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { mainStore } from "../store/index";
// import { Delete, Setting } from '@element-plus/icons-vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import $sys from "../api/sys";
const msgshow = ref(false);
const msgtitle = ref('添加信息');
const m_noshowip0 = ref(true);
const x = ref('');
const y = ref('');
const checkedClass = ref([]);
const checkedClassArr = ref([]);

function f_GetZH(zh) {
    var m_zh = parseInt(zh);
    if (zh - m_zh == 0) {
        return "K" + m_zh + "+000";
    }
    else {
        var bmz = parseInt((zh - m_zh) * 1000) + "";
        if (bmz.length == 1) {
            bmz = "00" + bmz;
        }
        else if (bmz.length == 2) {
            bmz = "0" + bmz;
        }
        return "K" + m_zh + "+" + bmz;
    }
}

function f_GetHTML(html) {
    html = html.replaceAll(/\n/g, '<br>')
    html = html.replaceAll(" ", "&nbsp;");
    return html;
}

function closeQunFA() {
    checkedClass.value = [];
    batchShow.value = false;
}
function handleCheckedClassChange(val) {

    if (checkedClass.value.indexOf('offline') != -1) {
        localStorage.setItem("offline", true);
    } else {
        localStorage.setItem("offline", false);
    }

    checkedClass.value = val;
    getDeviceList();
}

function f_IsClassChk(tp) {
    if (checkedClassArr.value.length < 1) return true;

}

const msgform = ref({
    content: '',
    align: 'center',
    transition: '1',
    font: 's',
    font_size: '1616',
    font_color: '000255000000',
    speed: 3,
    type: 0,
    leftx: "0",
    lefty: "0",
    left_xy: "0",
});

const TypeList = ref([
    {
        name: '一般类',
        value: 0
    },
    {
        name: '警示类',
        value: 1
    },
    {
        name: '宣传类',
        value: 2
    }
]);
const $store = mainStore();
const formdata = ref({
    factory: 'sunway',
    model: 'f',
    align: 'center',
    transition: '1',
    font: 's',
    fontsize: '1616',
    fontcolor: '255000000000'
});
const moudleList = ref([]);
function setSelectmoudle(e) {
    moudleList.value = [];
    e.forEach((item, index) => {
        moudleList.value.push(item.id);
    })
}

function checkNode(e) {
    ElMessageBox.confirm(
        '是否确定？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        console.log(e);
        let obj = {};
        obj.device_id = localStorage.getItem('boardid');
        obj.node_id = e.id;
        $sys.SaveAsMoudle(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功',
                    type: 'success'
                })
                moudleNodeDlg.value = false;
            }
        })
    })
}
function moudlepublish() {
    ElMessageBox.confirm(
        '确定从模板选择吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        let obj = {};
        obj.device_id = localStorage.getItem('boardid');
        obj.template_id = moudleList.value;
        $sys.addMsgFromTemp(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '操作成功',
                    type: 'success'
                })
                moudledlg.value = false;
                getPlayList(localStorage.getItem('boardid'));
            }
        })
    }).catch(() => { })
}
const IsApply = ref();
onMounted(() => {

    var ishow = localStorage.getItem("showip0");
    if (ishow) {
        if (ishow == "false") {
            m_noshowip0.value = false;
        }
        else {
            m_noshowip0.value = true;
        }
    }
    else {
        m_noshowip0.value = false;
    }
    IsApply.value = localStorage.getItem('IsApply');
    //厂家列表
    getDeviceFactory();
    // 型号列表
    getModelList();
    //对齐方式列表
    getalignList();
    //播放方式列表
    getTransitionList();
    //字体列表
    getTypeList();
    //字体大小列表
    getFontSizeList();
    //字体颜色列表
    getFontColorList();
    getSenstiveList();
    getDeviceList();
})
const DeviceList = ref([]);
const batchShow = ref(false);
const selectHis = ref([]);
const selectIP = ref([]);
function setSelectRows(e) {
    selectHis.value = [];
    selectIP.value = [];
    e.forEach((item, index) => {
        selectIP.value.push(item.ip);
        selectHis.value.push(item.id);
    })
}
function publishFromfront() {
    ElMessageBox.confirm(
        '确定从前端覆盖吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        ElMessage({
            message: '发布成功!',
            type: 'success'
        })
        PlayingShow.value = false;
    }).catch(() => {

    })
}
const loadings = ref(false);
function republis() {
    loadings.value = true;
    if (selectHis.value.length == 0) {
        ElMessage({
            message: '请选择！',
            type: 'warning'
        })
    } else {
        let obj = {};
        obj.ips = selectIP.value;
        $sys.Pinarray(obj).then(res => {
            if (res.code == 200) {
                loadings.value = false;
                ElMessageBox.confirm(
                    '是否确定？',
                    '警告',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(() => {
                    let obj = {};
                    obj.current_id = localStorage.getItem('boardid');
                    obj.target_ids = selectHis.value;
                    $sys.MsgBatchsend(obj).then(res => {
                        if (res.code == 200) {
                            ElMessage({
                                message: '提交成功！',
                                type: 'success'
                            })
                            batchShow.value = false;
                            cancelDlg();
                            getDeviceList();
                        }
                    })
                })
            } else {
                loadings.value = false;
                ElMessage({
                    duration:5000,
                    message: res.message,
                    type: 'warning'
                })
            }
        }).catch(() => {
            loadings.value = false;
            ElMessage({
                message: '发布失败！',
                type: 'error'
            })
        })


    }
}
function batchsend() {
    let offline = localStorage.getItem('offline');
    if (offline == 'true') {
        checkedClass.value.push('offline')
    } else {
        checkedClass.value = [];
    }
    getDeviceList();
    batchShow.value = true;
}
const ApplyList = ref([]);
function getDeviceList() {
    let obj = {};
    if (checkedClass.value.indexOf('offline') != -1) {
        obj.online = true;
    }
    $sys.deviceList(obj).then(res => {
        if (res.code == 200) {
            DeviceList.value = [];
            if (m_noshowip0.value) {
                DeviceList.value = res.data;
            }
            else {
                var temp = [];
                res.data.forEach(item => {
                    if (item.ip != "0") {
                        temp.push(item);
                    }
                    else {

                    }
                });
                DeviceList.value = temp;
            }
            
            let narr=[];
            
            checkedClass.value.forEach((item,index)=>{
                
                if(item=='offline'){
                    
                }else{
                    narr.push(item);
                    
                }
            })
             
            ApplyList.value = [];
            DeviceList.value.forEach((item, index) => {
                if (narr.length > 0) {
                    console.log(narr,'DeviceList');
                    var p = narr.indexOf(item.model.value);
                    if (p >= 0) {
                        if (!item.applying) {
                            ApplyList.value.push(item)
                        }
                    }
                }
                else {
                    if (!item.applying) {
                        ApplyList.value.push(item)
                    }
                }

            })
            
        }
    })
}
const InfoID = ref('');
function updMsg(id) {
    InfoID.value = id;
    $sys.getMsgByID(InfoID.value).then(res => {
        if (res.code == 200) {
            //console.log(111,res);
            msgtitle.value = '修改信息';
            msgform.value.content = res.data.content;
            msgform.value.align = res.data.align.value;
            msgform.value.font = res.data.font.value;
            msgform.value.font_color = res.data.font_color.value;
            msgform.value.delay_time = res.data.delay_time;
            msgform.value.speed = res.data.speed;
            msgform.value.font_size = res.data.font_size.value;
            msgform.value.transition = res.data.transition.value;
            msgform.value.sort = res.data.sort;
            msgform.value.type = res.data.type;
            f_calLeftTop(msgform.value.align);
            msgshow.value = true;
        }
    })
}
function DelMsg(id) {
    if (!edit.value) {
        ElMessage({
            message: '该情报板存在未审核的申请，无法修改该情报板的播放列表！',
            type: 'warning'
        })
        return;
    }
    ElMessageBox.confirm(
        '是否确定？',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.DelMsg(id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '删除成功！',
                    type: 'success'
                })
                getPlayList(localStorage.getItem('boardid'))
            } else {
                ElMessage({
                    message: res.message,
                    type: 'warning'
                })
            }
        })
    }).catch(() => {
    })
}
const SenstiveList = ref([])
function getSenstiveList() {
    $sys.getSenstiveList().then(res => {
        if (res.code == 200) {
            SenstiveList.value = [];
            res.data.forEach((item, index) => {
                SenstiveList.value.push(item.value);
            })
        }
    })
}
function forbiddenStr(str) {
    var re = '';
    for (var i = 0; i < SenstiveList.value.length; i++) {
        if (i == SenstiveList.value.length - 1)
            re += SenstiveList.value[i];
        else
            re += SenstiveList.value[i] + "|";
    }
    var pattern = new RegExp(re, "g");
    if (pattern.test(str)) {
        return false;
    } else {
        return true;
    }
}

//字体大小
function f_ResetXY() {
    f_calLeftTop(msgform.value.align);
}

//huang 重新计算左右边距
const cal_iHei = ref(0);
const cal_iWid = ref(0);
function f_calLeftTop(align) {
    //console.log(align, 'align');
    //alert(align);
    var txt = msgform.value.content;
    var arrTxt = txt.split("\n");
    //msgform.value.align   
    var maxlen = 0;
    var maxText = "";
    arrTxt.forEach(item => {
        if (item.length > maxlen) {
            maxlen = item.length;
            maxText = item;
        }
    });

    var irow = arrTxt.length;
    var fontsize = parseInt(msgform.value.font_size.substring(0, 2));
    cal_iHei.value = parseInt(DeviceInfo.value.height) - irow * fontsize;
    var maxTextLen = f_getzhongwenlen(maxText);
    //alert(maxTextLen);
    cal_iWid.value = parseInt(DeviceInfo.value.width) - maxTextLen * fontsize;

    //console.log(111, maxlen, DeviceInfo.value.width, DeviceInfo.value.height,fontsize);

    if (align == "left") {
        var lefty = parseInt(cal_iHei.value / 2);
        msgform.value.leftx = "000";
        msgform.value.lefty = f_add0(lefty);
        return;
    }

    //开始计算居中的值
    if (align == "center") {

        var leftx = parseInt(cal_iWid.value / 2);
        var lefty = parseInt(cal_iHei.value / 2);
        //alert(leftx);
        if (leftx < 0) {
            leftx = 0;
        }
        if (lefty < 0) {
            lefty = 0;
        }
    }
    else { //align=="right"

        var leftx = parseInt(cal_iWid.value);
        var lefty = parseInt(cal_iHei.value / 2);
        if (leftx < 0) {
            leftx = 0;
        }
        if (lefty < 0) {
            lefty = 0;
        }
    }
    //补齐几个0；
    msgform.value.leftx = f_add0(leftx);
    msgform.value.lefty = f_add0(lefty);
    msgform.value.left_xy = msgform.value.leftx + msgform.value.lefty;
    //alert(fontsize);
}


function f_add0(val) {
    var str = val + "";
    if (str.length == 1) {
        str = "00" + str;
    }
    else if (str.length == 2) {
        str = "0" + str;
    }
    else if (str.length > 3) {
        str = "000";
    }
    return str;
}

//如何判定汉字还是字符串
function f_getzhongwenlen(str) {
    var ires = 0.0;
    for (var i = 0; i < str.length; i++) {
        var temp = str.substring(i, i + 1);
        if (isChinese(temp)) {
            //alert(temp);
            ires++;
        }
        else {
            ires = ires + 0.5;
        }
    }
    return ires;
}

function isChinese(str) {
    var pattern = /^[\u4E00-\u9FA5]+$/; // 利用正则表达式匹配中文字符
    return pattern.test(str);
}

function f_Msg(msg) {
    ElMessage({
        message: msg,
        type: 'warning'
    })
}

function includeStr() {
    if (cal_iHei.value < 0 || cal_iWid.value < 0) {
        var msg = "发布内容超出：" + DeviceInfo.value.width + "×" + DeviceInfo.value.height + " 尺寸范围，是否继续？";
        ElMessageBox.confirm(
            msg,
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                send();
            })
            .catch(() => {

            })
    }
    else {
        send();
    }
}

function send() {
    //huang
    let obj = {};
    obj.content = msgform.value.content;
    let flag = true;
    $sys.include(obj).then(res => {
        if (res.data.length > 0) {
            let str = '';
            res.data.forEach((item, index) => {
                str += item.value + '，';
            })
            ElMessage({
                message: `当前信息包含敏感词：${str}请及时修改！`,
                type: 'warning'
            })
            return;
        } else {
            addMsg();
        }
    })
}

//添加新节目
function addMsg() {
    let flag = true;
    let edittype = '添加';
    if (msgtitle.value == '添加信息') {
        edittype = '添加';
    } else {
        edittype = '修改';
    }
    let overtype = `是否确定？`;

    let newLines = msgform.value.content.match(/\n/g) || [];
    let strarr = msgform.value.content.split('\n');
    let size = Number(msgform.value.font_size.slice(0, -2));
    let contentLength = msgform.value.content.length;
    //左边偏移
    msgform.value.left_xy = msgform.value.leftx + "" + msgform.value.lefty;
    // alert(msgform.value.left_xy);
    //console.log(msgform.value);
    if (newLines.length == 0) {
        // if (contentLength * size > DeviceWidth.value) {
        //     flag = false;
        //     overtype = `当前信息超过情报板宽度,确定${edittype}吗?`

        // }
    } else if (newLines.length > 0) {
        // if ((newLines.length + 1) * size > DeviceHeight.value) {
        //     flag = false;
        //     overtype = `当前信息超过情报板高度,确定${edittype}吗?`

        // }
    } else {
        flag = true;
        overtype = `确定${edittype}此条信息吗?`;
    }

    console.log(msgform.value, 'msgform');
    // return;
    if (msgtitle.value == '添加信息') {
        msgform.value.device_id = localStorage.getItem('boardid');
        if (checkMsgForm()) {
            $sys.msgadd(msgform.value).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '添加成功!',
                        type: 'success'
                    })
                    cancleMsg();
                    getPlayList(localStorage.getItem('boardid'))
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning'
                    })
                    cancleMsg();
                    getPlayList(localStorage.getItem('boardid'))
                }
            })
        }
    } else {
        msgform.value.id = InfoID.value;
        let obj3 = msgform.value;
        if (checkMsgForm()) {
            $sys.updateMsg(obj3).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        message: '修改成功!',
                        type: 'success'
                    })
                    // cancleMsg();
                    msgshow.value = false;
                    getPlayList(localStorage.getItem('boardid'))
                } else {
                    ElMessage({
                        message: res.message,
                        type: 'warning'
                    })
                    // cancleMsg();
                    msgshow.value = false;
                    getPlayList(localStorage.getItem('boardid'))
                }
            })
        }
    }

}
function clearmsg() {
    if (!edit.value) {
        ElMessage({
            message: '该情报板存在未审核的申请，无法修改该情报板的播放列表！',
            type: 'warning'
        })
        return;
    }
    let id = localStorage.getItem('boardid');
    ElMessageBox.confirm(
        '确定清空消息列表吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        $sys.removeAllMsg(id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '清空成功!',
                    type: 'success'
                })
                getPlayList(id);
            }
        })
    }).catch(() => {
    })
}
function openaddmsg() {
    if (!edit.value) {
        ElMessage({
            message: '该情报板存在未审核的申请，无法修改该情报板的播放列表！',
            type: 'warning'
        })
        return;
    }
    msgtitle.value = '添加信息';
    InitMsgForm();
    msgshow.value = true;
}
function cancleMsg() {
    InitMsgForm();
    msgshow.value = false;
}
const speedList = ref([
    {
        value: 1,
        label: '1'
    },
    {
        value: 2,
        label: '2'
    },
    {
        value: 3,
        label: '3'
    },
    {
        value: 4,
        label: '4'
    },
    {
        value: 5,
        label: '5'
    }
])
function checkMsgForm() {
    let flag = true;
    if (!msgform.value.content || msgform.value.content == '') {
        ElMessage({
            message: '消息内容不能为空',
            type: 'warning'
        })
        flag = false;
    } else if (!msgform.value.align || msgform.value.align == '') {
        ElMessage({
            message: '对齐方式不能为空',
            type: 'warning'
        })
        flag = false;
    } else if (!msgform.value.transition || msgform.value.transition == '') {
        ElMessage({
            message: '播放方式不能为空',
            type: 'warning'
        })
        flag = false;
    } else if (!msgform.value.font || msgform.value.font == '') {
        ElMessage({
            message: '字体类型不能为空',
            type: 'warning'
        })
        flag = false;
    } else if (!msgform.value.font_size || msgform.value.font_size == '') {
        ElMessage({
            message: '字体大小不能为空',
            type: 'warning'
        })
        flag = false;
    } else if (!msgform.value.font_color || msgform.value.font_color == '') {
        ElMessage({
            message: '字体颜色不能为空',
            type: 'warning'
        })
        flag = false;
    } else if (!msgform.value.speed || msgform.value.speed == '') {
        ElMessage({
            message: '出字速度不能为空',
            type: 'warning'
        })
        flag = false;
    } else {
        flag = true;
    }
    return flag;
}
function InitMsgForm() {
    for (let key in msgform.value) {
        msgform.value[key] = '';
        msgform.value['align'] = 'center';
        msgform.value['transition'] = '1';
        msgform.value['font'] = 's';
        msgform.value['font_size'] = '1616';
        msgform.value['font_color'] = '000255000000';
        msgform.value['font_color'] = '000255000000';
        msgform.value['delay_time'] = 5;
        msgform.value['sort'] = 1;
        msgform.value['speed'] = 5;
        msgform.value['type'] = 0;
    }
}
const FactoryList = ref([]);
function getDeviceFactory() {
    $sys.getDeviceFactory().then(res => {
        if (res.code == 200) {
            FactoryList.value = res.data;
        }
    })
}
const ModelList = ref([]);
function getModelList() {
    $sys.getDeviceModel().then(res => {
        if (res.code == 200) {
            ModelList.value = res.data;
            let obj = {
                label: '隐藏离线设备',
                value: 'offline',
                type_code: 'offline',
                id: 107
            }
            ModelList.value.push(obj);
        }
    })

}
const alignList = ref([]);
function getalignList() {
    $sys.getDeviceAlign().then(res => {
        if (res.code == 200) {
            // alignList.value = res.data;
            alignList.value = [
                {
                    "id": 39,
                    "label": "居中",
                    "type_code": "info_board_align",
                    "value": "center",
                    "sort": 0,
                    "gmt_create": "2024-09-11 15:52:29",
                    "gmt_modified": "2024-09-11 15:52:29"
                },
                {
                    "id": 40,
                    "label": "居左",
                    "type_code": "info_board_align",
                    "value": "left",
                    "sort": 1,
                    "gmt_create": "2024-09-11 15:52:29",
                    "gmt_modified": "2024-11-15 13:51:34"
                },
                {
                    "id": 41,
                    "label": "居右",
                    "type_code": "info_board_align",
                    "value": "right",
                    "sort": 2,
                    "gmt_create": "2024-09-11 15:52:29",
                    "gmt_modified": "2024-11-15 13:52:04"
                }
            ];
        }
    })
}
const TransitionList = ref([]);
function getTransitionList() {
    $sys.getDeviceTransition().then(res => {
        if (res.code == 200) {
            TransitionList.value = res.data;
        }
    })
}
const FontList = ref([]);
function getTypeList() {
    $sys.getInfoBoardFont().then(res => {
        if (res.code == 200) {
            FontList.value = res.data;
        }
    })
}
const FontSizeList = ref([]);
function getFontSizeList() {
    $sys.getInfoBoardFontSize().then(res => {
        if (res.code == 200) {
            FontSizeList.value = res.data;
        }
    })
}
const FontColorList = ref([]);
function getFontColorList() {
    $sys.getInfoBoardFontColor().then(res => {
        if (res.code == 200) {
            FontColorList.value = res.data;
        }
    })
}
const edit = ref(false);
watch(() => $store.InfoboradID, (nv, ov) => {
    if (nv && nv != '') {
        IsApply.value = localStorage.getItem('IsApply');
        getDeviceInfo(nv);
        getPlayList(nv);
    }
})
const PlayingShow = ref(false);
const PlayingList = ref([]);
function getplayinglist() {
    $sys.getTempTree().then(res => {
        if (res.code == 200) {
            TempList.value = res.data;
            moudleNodeDlg.value = true;
            nodeFather.value = true;
        }
    })
    // let deviceID = localStorage.getItem('boardid');
    // $sys.getInfoContent(deviceID).then(res => {
    //     if (res.code == 200) {
    //         PlayingShow.value = true;
    //     }
    // })
}
const DeviceInfo = ref({});
const DeviceWidth = ref(0);
const DeviceHeight = ref(0);
function getDeviceInfo(id) {
    $sys.getDeviceInfo(id).then(res => {
        if (res.code == 200) {
            DeviceWidth.value = res.data.width;
            DeviceHeight.value = res.data.height;
            if (res.data.applying == true) {
                edit.value = false;
            } else {
                edit.value = true;
            }
            DeviceInfo.value = res.data;
        }
    })
}
const PlayList = ref([]);
function getPlayList(id) {
    let obj = {};
    obj.device_id = id;
    $sys.getPlayList(obj).then(res => {
        if (res.code == 200) {
            PlayList.value = res.data;
        }
    })
}
function formatSize(size) {
    let m_size = '';
    let o_size = Number(size.substr(0, 2));
    m_size = o_size * 2;

    return m_size + 'px';
}

function ckalign(e) {
    console.log(e);
    f_calLeftTop(e);
}


function formatAlign(align) {

    let flex = '';
    if (align == 'left') {
        flex = 'flex-start'
    } else if (align == 'right') {
        flex = 'flex-end'
    } else if (align == 'center') {
        flex = 'center'
    }
    return flex;
}
function formatColor(string) {
    const r = string.substring(0, 3); // 红色
    const g = string.substring(3, 6); // 绿色
    const b = string.substring(6, 9); // 蓝色
    const a = string.substring(9, 12); // Alpha
    return `rgba(${r},${g},${b},1)`;
}
function cancelDlg() {
    $store.InfoboradDlg = false;
    $store.InfoboradID = '';
}
const loading = ref(false);
function ApplyMsg() {
    console.log(DeviceInfo.value);

    if (PlayList.value.length == 0) {
        ElMessage({
            message: '播放列表不能为空！',
            type: 'warning'
        })
        return;
    } else {
        loading.value = true;
        $sys.pingInfoBoard(DeviceInfo.value.id).then(res => {
            if (res.code == 200) {
                loading.value = false;
                if (res.data == true) {
                    ElMessageBox.confirm(
                        '提交审核？',
                        '警告',
                        {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(() => {
                        let obj = {};
                        obj.device_ids = [];
                        obj.device_ids.push(localStorage.getItem('boardid'));
                        $sys.ApplyAdd(obj).then(res => {
                            if (res.code == 200) {
                                ElMessage({
                                    message: '提交成功!',
                                    type: 'success'
                                })
                                $store.InfoboradDlg = false;
                                $store.InfoboradID = '';
                            }
                        })
                    }).catch(() => { })
                } else {
                    ElMessage({
                        message: '当前设备通讯失败！',
                        type: 'warning'
                    })
                }
            } else {
                loading.value = false;
                ElMessage({
                    message: res.message,
                    type: 'warning'
                })
            }
        })

    }

}
function sureSendMsg() {
    ElMessageBox.confirm(
        '确定发布当前列表信息到该情报板?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        let id = localStorage.getItem('boardid');
        $sys.sendAllMsg(id).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '发布成功!',
                    type: 'success'
                })
                $store.InfoboradDlg = false;
                $store.InfoboradID = '';
            }
        })
    }).catch(() => {

    })
}
const moudledlg = ref(false);
const moudleNodeDlg = ref(false);
const TempList = ref([]);
const TempID = ref("");
const ChildTempList = ref([]);
const showTempFather = ref(true);
const father = ref(true);
const fatherid = ref("");
const nodeFather = ref(true);
function ChildNode(e) {
    father.value = false;
    TempList.value = e.children;
}
function NodeChildNode(e) {
    nodeFather.value = false;
    TempList.value = e.children;
}
function f_back() {
    father.value = true;
    moudlemsg();
}
function n_back() {
    nodeFather.value = true;
    $sys.getTempTree().then(res => {
        if (res.code == 200) {
            TempList.value = res.data;
        }
    })
}
function moudlemsg() {
    if (!edit.value) {
        ElMessage({
            message: '该情报板存在未审核的申请，无法修改该情报板的播放列表！',
            type: 'warning'
        })
        return;
    }
    $sys.getTempTree().then(res => {
        if (res.code == 200) {
            TempList.value = res.data;
            moudledlg.value = true;
        }
    })
}
function getChild(e) {
    TempID.value = e.id;
    $sys.getChildList(e.id).then(res => {
        if (res.code == 200) {
            ChildTempList.value = res.data;
            showTempFather.value = false;
        }
    })
}
function choiceTemp(e) {
    ElMessageBox.confirm(
        '确定选用此模板添加到播放列表吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        let obj = {};
        obj.template_id = e.id;
        obj.device_id = localStorage.getItem('boardid');
        $sys.addMsgFromTemp(obj).then(res => {
            if (res.code == 200) {
                ElMessage({
                    message: '添加成功!',
                    type: 'success'
                })
                getPlayList(localStorage.getItem('boardid'));
                moudledlg.value = false;
            } else {
                ElMessage({
                    message: '添加失败!',
                    type: 'error'
                })
            }
        })

    }).catch(() => {

    })
}
function backTemp() {
    showTempFather.value = true;
    father.value = true;
}
</script>

<style scoped>
:deep(*) {
    font-size: 16px;
}

.preview-f {
    /* width: 90%;
    height: 200px; */
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 auto;
    background-color: black;
    font-weight: bold;
    overflow-y: auto;
}

.preview {
    white-space: nowrap;
}

.historyList {
    overflow-y: auto;
    height: 500px;
}

.historyList::-webkit-scrollbar {
    width: 5px;
}

.historyList::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 设置滚动条的颜色 */
    border-radius: 6px;
    /* 设置滚动条的圆角 */
}

.historyList::-webkit-scrollbar-track {
    background-color: #888;
    border-radius: 6px;
    /* 设置滚动条的轨道颜色 */
}
.redlabel{
    color: #F4446F !important;
}
:deep(.redlabel .is-checked .el-checkbox__inner){
    background-color:#F4446F !important;
    border-color:#F4446F !important;
}
.preview-f::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.preview-f::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 设置滚动条的颜色 */
    border-radius: 6px;
    /* 设置滚动条的圆角 */
}

.preview-f::-webkit-scrollbar-track {
    background-color: #888;
    border-radius: 6px;
    /* 设置滚动条的轨道颜色 */
}

:deep(.el-table__inner-wrapper:before) {
    background: none;
}

.playitems,
.playitemq {
    font-size: 16px;
    line-height: 40px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.DevicInfo {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-left: 15px;
    margin-bottom: 10px;
}

.InfoItem {
    line-height: 30px;
    font-size: 16px;
    color: rgb(136, 130, 130);
    ;
    width: 50%;
}

.InfoContent {
    font-size: 16px;
    color: #00c9fc;
    padding-left: 10px;
    line-height: 30px;
    height: 30px;
    width: 80%;
    background-color: #263342;
    border-radius: 5px;
}

.playitems {
    background-color: black;
}

.playitemq {
    background-color: black;
}

.playlist {
    width: 95%;
    margin: 0 auto;
    height: 200px;
    background-color: #172029;
    overflow-y: auto;
    border-radius: 5px;
}

.playlist::-webkit-scrollbar {
    width: 5px;
}

.playlist::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 设置滚动条的颜色 */
    border-radius: 6px;
    /* 设置滚动条的圆角 */
}

.playlist::-webkit-scrollbar-track {
    background-color: #888;
    border-radius: 6px;
    /* 设置滚动条的轨道颜色 */
}

:deep(.el-dialog) {
    background-color: #2F4052 !important;
}

:deep(.el-dialog__title),
:deep(.el-dialog__body) {
    color: white !important;
}

:deep(.InfoBoardDetail .el-select),
:deep(.msgcontent .el-select) {
    width: 150px !important;
}

:deep(.el-textarea__inner) {
    height: 100px !important;
    width: 486px;
}

:deep(.msgcontent .el-input) {
    width: 150px !important;
}

:deep(.InfoBoardDetail .el-form-item__label),
:deep(.msgcontent .el-form-item__label) {
    color: white !important;
}


:deep(.templist .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell) {
    background: none;
}

:deep(.templist .el-table__inner-wrapper) {
    &::before {
        display: none;
    }
}

:deep(.templist .el-table__header-wrapper th) {
    background-color: #2F4052;
    color: #fff;
}

:deep(.templist .el-table__row) {
    background-color: #2F4052;
    color: #B2C9EE;
}



:deep(.templist .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td) {
    background-color: #263343 !important;
}

:deep(.templist .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td) {
    background-color: #2F4052 !important;
}

:deep(.templist .el-table__body tr:nth-child(even)) {
    background-color: #263343;
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-select__wrapper) {
    background-color: #34475b !important;
    border: 1px solid #2b3b4b !important;
    box-shadow: none !important;

}

:deep(.el-input__inner),
:deep(.el-textarea__inner),
:deep(.el-select__placeholder) {
    color: #ccc !important;
}
</style>

<style lang='less'>
.el-select__popper.el-popper {
    background: #2F4052 !important;
    border: 1px #2F4052 solid !important;
}

.el-select-dropdown__item.is-hovering {
    background-color: #004f99 !important;
}

.el-select-dropdown__item {
    color: #95ccea !important;
}

.el-select-dropdown__item.is-selected {
    color: #eebc43;
}

.el-popper.is-light .el-popper__arrow:before {
    background: #2F4052 !important;
    border: 1px #2F4052 solid !important;
}

.el-table__cell {
    border: 1 !important;
    border-color: #222e3b;
}

.el-table--border .el-table__inner-wrapper:after,
.el-table--border:after,
.el-table__border-left-patch {
    background-color: #222e3b;
}

#InfoBorad {
    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background: none;
    }

    .el-table__inner-wrapper {
        &::before {
            display: none;
        }
    }

    // 头部样式
    .el-table__header-wrapper th {
        background-color: #2F4052;
        color: #fff;
    }

    // 内容行样色
    .el-table__row {
        background-color: #2F4052;
        color: #B2C9EE;
    }

    // 内容行边框
    .el-table__cell {
        border: 1 !important;
        border-color: #222e3b;
    }

    .el-table--border .el-table__inner-wrapper:after,
    .el-table--border:after,
    .el-table__border-left-patch {
        background-color: #222e3b;
    }

    //自定义斑马线和鼠标移入样式
    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
        background-color: #263343 !important;
    }

    .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
        background-color: #2F4052 !important;
    }

    .el-table__body tr:nth-child(even) {
        background-color: #263343;
        /* 偶数行（斑马线）的默认背景色 */
    }

}

.el-scrollbar__wrap {
    background-color: #2F4052 !important;
    border-bottom: 1px solid #222e3b;
}

.el-checkbox__label {
    color: #95ccea;
    font-size: medium;
}

// .el-form-item__label{
//     width: 120px !important;
// }</style>